<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进货管理系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }
        .nav-tabs {
            display: flex;
            list-style: none;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .nav-tabs li {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f1f1f1;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .nav-tabs li.active {
            background-color: #3498db;
            color: white;
        }
        .tab-content {
            display: none;
            background-color: white;
            padding: 20px;
            border-radius: 0 5px 5px 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tab-content.active {
            display: block;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #3498db;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }
        .search-bar {
            margin-bottom: 20px;
        }
        .search-bar input {
            width: 70%;
            display: inline-block;
        }
        .search-bar button {
            width: 28%;
            margin-left: 2%;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>进货管理系统</h1>
        </header>
        
        <ul class="nav-tabs">
            <li class="active" onclick="openTab('suppliers')">供应商管理</li>
            <li onclick="openTab('purchase-plan')">采购计划</li>
            <li onclick="openTab('orders')">订单管理</li>
            <li onclick="openTab('inventory')">库存记录</li>
        </ul>
        
        <!-- 供应商管理 -->
        <div id="suppliers" class="tab-content active">
            <div class="search-bar">
                <input type="text" placeholder="搜索供应商...">
                <button>搜索</button>
            </div>
            
            <button onclick="showAddSupplierForm()">添加供应商</button>
            
            <div id="add-supplier-form" style="display: none; margin-top: 20px;">
                <h3>添加新供应商</h3>
                <div class="form-group">
                    <label>供应商名称</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>联系人</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>联系电话</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>电子邮件</label>
                    <input type="email">
                </div>
                <div class="form-group">
                    <label>地址</label>
                    <textarea rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label>主要产品种类</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>平均价格水平</label>
                    <input type="text">
                </div>
                <div class="form-group">
                    <label>平均交货时间(天)</label>
                    <input type="number">
                </div>
                <button>保存</button>
                <button onclick="hideAddSupplierForm()">取消</button>
            </div>
            
            <table>
                <thead>
                    <tr>
                        <th>供应商名称</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>产品种类</th>
                        <th>价格水平</th>
                        <th>交货时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>ABC食品有限公司</td>
                        <td>张经理</td>
                        <td>13800138000</td>
                        <td>零食、饮料</td>
                        <td>中等</td>
                        <td>3天</td>
                        <td>
                            <button>编辑</button>
                            <button>删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>XYZ日用品厂</td>
                        <td>李主管</td>
                        <td>13900139000</td>
                        <td>清洁用品</td>
                        <td>低</td>
                        <td>5天</td>
                        <td>
                            <button>编辑</button>
                            <button>删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 采购计划 -->
        <div id="purchase-plan" class="tab-content">
            <div class="alert alert-warning">
                系统建议: 根据销售数据和当前库存，建议您优先采购以下商品。
            </div>
            
            <div class="search-bar">
                <input type="text" placeholder="搜索商品...">
                <button>搜索</button>
            </div>
            
            <button>生成采购建议</button>
            <button>导出采购计划</button>
            
            <table>
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>当前库存</th>
                        <th>安全库存</th>
                        <th>最近销量</th>
                        <th>建议采购量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>可口可乐 330ml</td>
                        <td>50</td>
                        <td>100</td>
                        <td>200/周</td>
                        <td>150</td>
                        <td>
                            <button>调整</button>
                        </td>
                    </tr>
                    <tr>
                        <td>奥利奥饼干</td>
                        <td>30</td>
                        <td>80</td>
                        <td>150/周</td>
                        <td>100</td>
                        <td>
                            <button>调整</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 订单管理 -->
        <div id="orders" class="tab-content">
            <div class="search-bar">
                <input type="text" placeholder="搜索订单...">
                <button>搜索</button>
            </div>
            
            <button onclick="showCreateOrderForm()">创建新订单</button>
            
            <div id="create-order-form" style="display: none; margin-top: 20px;">
                <h3>创建采购订单</h3>
                <div class="form-group">
                    <label>供应商</label>
                    <select>
                        <option>请选择供应商</option>
                        <option>ABC食品有限公司</option>
                        <option>XYZ日用品厂</option>
                    </select>
                </div>
                <div class="form-group">
                    <label 
